<template>
    <div class="box_alarm">
        <MoodalTitle :title="'实时情况'" />
        <div class="flex">
            <div class="box_le">
                <p class="box_p">{{sumMonth.todaySum}} <span style="font-size: 1.4rem;">个</span></p>
                <p>今日总事件</p>
            </div>
            <div class="box_le">
                <p class="box_p" style="color: #4ED20C;">{{sumMonth.closedOrder}} <span style="font-size: 1.4rem;">个</span></p>
                <p>已处理事件</p>
            </div>
            <!-- <div class="box_le">
                <p class="box_p" style="color: red;">{{sumMonth.jinJi}} <span style="font-size: 1.4rem;">个</span></p>
                <p>紧急事件</p>
            </div> -->
        </div>

        <div class="flex">
            <div class="box_le">
                <p class="box_p" style="color:#FF8A00;">{{sumMonth.noOrder}} <span style="font-size: 1.4rem;">个</span></p>
                <p>待处理事件</p>
            </div>
        </div>

        <div class="flex">
                <div class="box_top">
                    <p class="boxTop_p">人员在线情况</p>
                    <p class="boxBop_p">在线 <span class="boxBop_span">{{ sumMonth.vehicleIsLine }}人</span> 总数 <span style="font-weight: 600;">
                     {{ sumMonth.personSum }} 人</span></p>
                </div>
                <!-- <div class="box_but box_img">
                    <p class="boxTop_p">车辆在线情况</p>
                    <p class="boxBop_p">在线 <span class="boxBop_span">{{ sumMonth.vehicleIsLine }}辆</span> 总数 <span style="font-weight: 600;">
                        {{ sumMonth.vehicleSum }}  辆</span></p>
                </div> -->
            </div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import {ZongHeZhTiFaDB} from '@/api/zhangzi/index'
export default {
    components: { MoodalTitle },
    data() {
        return {
            sumMonth:{}
        }
    },
    mounted(){
        this.ZhiShiJn()
    },
    methods:{
        // 实时情况
        ZhiShiJn() {
            ZongHeZhTiFaDB.zongheZhiFaTiJianAPI().then(res =>{
                console.log(res,'综合实时情况111');
                if(res.code == 200){
                    this.sumMonth = res.data
                }
            })
    }
}
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 47.5rem !important;
    margin-bottom: 1.9rem;
}
.flex {
    display: flex;
    justify-content: space-between;
}
.box_le {
    margin-top: 3rem;
    width: 21.5rem;
    height: 8.1rem;
    text-align: center;
    color: #fff;
    font-size: 1.4rem;
    background-image: url(../../../../assets/images//zhangzi//Special/Escalation.png);
    .box_p{
        margin: 0.8rem 0 0.3rem 0;
        font-size: 2.8rem !important;
        color: #219EFF;
    }
}
.box_top,
 .box_but{
    margin-top: 3rem;
    width: 21.7rem;
    height: 8.2rem;
    background: url(../../../../assets//images//zhangzi/Sanitation/personnel2.png) no-repeat;
    background-size: cover;

    .boxTop_p {
        margin: 1rem 0 1.5rem 1.5rem;
        font-size: 1.4rem;
        color: #fff;
    }

    .boxBop_p {
        margin-left: 1.5rem;
        font-size: 1.4rem;
        color: #fff;

        .boxBop_span {
            margin: 0 0.5rem 0 0.5rem;
            color: #42AD0D;
        }
    }
}
.box_img{
    margin-top: 3rem;
    width: 21.7rem;
    height: 8.2rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/vehicles2.png) no-repeat !important;
    background-size: 100% 100% !important;
}
</style>